<template>
  <div class="chargeList-wrapper">
    <div class="content">
      <div class="actions">
        <div class="left">
          <!-- <el-button style="margin-right: 10px" type="primary" plain size="mini" @click="clickEditPropFn">回单回收</el-button> -->
          <!-- <el-button style="margin-bottom: 10px" type="primary" plain size="mini" @click="handleClickAdd">新增</el-button>
          <el-button style="margin-bottom: 10px" type="primary" plain size="mini" @click="handleClickDel">删除</el-button> -->
        </div>
        <div class="right">
          <el-pagination :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
      <el-table ref="multipleTable" :data="tableData" border stripe align="center"
        @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column prop="" fixed label="序号" width="50" type="index"></el-table-column>

        <el-table-column prop="branch_name" label="区域"> </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>

        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleClickEdit(scope.row, 'edit')">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="区域客服电话设置" width="500px" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
        <el-form-item label="区域" prop="branch_id">
          <el-cascader ref="cascader" disabled style="width: 180px" :options="branchData" :show-all-levels="false"
            v-model="ruleForm.branch_id" :props="{
              emitPath: false,
              checkStrictly: true,
              label: 'branch_name',
              value: 'id',
              children: 'next_level_data',
            }" clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" style="width:180px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOK">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  BranchServiceList,
  BranchServiceUpdate
} from "@/api/companymanagement";
import { organizationBox } from "@/api/organization";


export default {
  name: "customerServiceList",
  components: {},
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      dialogFormVisible: false,
      ruleForm: {},
      chargeData: [],
      branchData: [],
      mode: "",
      checkedOrders: [],
      rules: {
        phone: [
          { required: true, message: "请填写电话", trigger: "blur" },
        ],

      },
    };
  },
  mounted() {
    this.getListData();
    // searchChargeData({}).then((res) => {
    //   this.chargeData = res.data;
    // });
    organizationBox(
      { not_show_first_branch: 1, }
    ).then(res => {
      this.branchData = res.data;
    });
  },
  methods: {
    handleOK() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const _ruleForm = {
          id: this.ruleForm.id,
          phone: this.ruleForm.phone
        };
        BranchServiceUpdate(_ruleForm).then((res) => {
          if (res.code === 10000) {
            if (this.mode === "edit") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "新建成功",
                type: "success",
              });
            }
            this.dialogFormVisible = false;
            this.getListData();
          }
        });
      });
    },
    getListData() {
      BranchServiceList({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
      }).then((res) => {
        this.tableData = res.data.list || [];
        this.paginations.total = res.data.total;
      });
    },
    handleClickAdd() {
      this.mode = "add";
      this.ruleForm = {};
      this.dialogFormVisible = true;
    },
    handleClickDel() {
      if (this.checkedOrders.length === 0) {
        this.$message({
          type: "warning",
          message: "请选中后进行操作",
        });
        return;
      }
      ResponsibleDelete({
        ids: this.checkedOrders,
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getListData();
        }
      });
    },
    handleClickEdit(item) {
      this.mode = "edit";
      item.branch_id = item.branch_id * 1;
      this.ruleForm = {...item};
      this.dialogFormVisible = true;
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getListData();
    },
    handleSelectionChange(val) {
      this.checkedOrders = val.map((item) => item.id);
    },
  },
};
</script>
<style lang="scss" scoped>
.chargeList-wrapper {
  background-color: #fff;

  // padding: 10px;
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
    padding-bottom: 5px;
  }

  .content {
    // padding: 0 0 0 10px;
    background-color: #fff;
  }

  .orderHeader {
    background-color: #fff;

    .orderSearch {
      // padding-left: 10px;

      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }
}
</style>